<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>职业认证-win</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__common.css" />

    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        .right{
            color:#333!important;
        }
        body{
            background:#fff;

        }
        .container{
            width:100%;
            padding:2.25rem 0;
            background:#f5f5f5;

        }
        .stage{
            width:64%;
            margin:auto;
            display: flex;
            align-items: center;

        }
        .round{
            width:0.75rem;
            height:0.75rem;
            background:#3994F6;
            border-radius:50%;
        }
        .round1{
            width:0.75rem;
            height:0.75rem;
            background:#E6E6E6;
            border-radius:50%;
        }
        .line{
            width:41%;
            height:2px;
        }
        .underLinee{
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0,#DBDBDB,#DBDBDB 50%,transparent 50%);
            background-image: -webkit-linear-gradient(90deg,#DBDBDB,#DBDBDB 50%,transparent 50%);
        }
        .underLineee{
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0,#3994F6,#3994F6 50%,transparent 50%);
            background-image: -webkit-linear-gradient(90deg,#3994F6,#3994F6 50%,transparent 50%);
        }
        .stageName{
            width:71.25%;
            margin:auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left:12.36%;
            margin-right:16.39%;
            margin-top:0.7rem;
        }
        .name{
            font-size:0.75rem;
            color:#333;
        }
        .person{
            padding:0 0.8rem;
        }
        .box{
            width:100%;
            height:2.5rem;
            line-height:2.5rem;
        }
        .info{
            font-size:0.8rem;
            color:333;
        }
        input[type='text']{
            width:55%;
            text-align:right;
            color:#333;
            font-size:0.8rem;
            padding:0;
            border:none;
            background:#fff;
        }
        .data1{
            font-size:0.8rem;
            color:#999;
        }
        input::-webkit-input-placeholder {
            font-size:0.8rem;
            color:#999;
            text-align:right;
        }
        .arrow{
            width:0.75rem;
            height:100%;
            background:url(__IMG__goto.png) no-repeat center center;
            background-size:0.75rem 0.75rem;
            margin-left:0.25rem;
        }
        .next{
            width:100%;
            height:2.5rem;
            line-height: 2.5rem;
            color:#fff;
            font-size:0.8rem;
            font-weight:500;
            text-align:center;
            border-radius:0.25rem;
            margin:auto;
            background:#E73C5C;
        }
        .holder{
            width:100%;
            height:0.5rem;
            background:#f5f5f5;
        }
        .content{
            padding:1rem 0.8rem 0 0.8rem;
        }
        .upTitle{
            font-size:0.8rem;
            color:#333;
            font-weight:500;
            margin-bottom:0.1rem;
        }
        .upName{
            font-size:0.6rem;
            color:#999;
        }
        .picBox{
            width:100%;
            height:3.75rem;
            display: flex;
            justify-content: space-between;
            margin-top:0.7rem;
        }
        .pic{
            /*width:27.8%;*/
            flex:1;
            height:3.75rem;
            border-radius:0.25rem;
            position:relative;
            margin:0;
            border:none;

        }
        .picImg{
            width:100%;
            height:100%;
            border-radius:0.25rem;
            border:none;
        }
        .picText{
            border-top-left-radius:0.25rem;
            position:absolute;
            top:0;
            left:0;
            background:rgba(0,0,0,0.3);
            color:#fff;
            font-size:0.5rem;
            line-height:0.7rem;
            padding:0.1rem 0.3rem;
        }
        .addPic{
            width:100%;
            height:auto;
            margin-top:1.1rem;
            padding-bottom:4.2rem ;
        }

        .addPic1{
            width:100%;
            height:7.5rem;
            margin-top:1.1rem;
            position:relative;
        }
        .addImg{
            width:100%;
            height:100%;
        }
        .btn{
            width:100%;
            padding: 0 0.8rem;
            position:fixed;
            bottom:0.75rem;
        }

        .aui-actionsheet-btn-item {
            height: 2.45rem;
            line-height: 2.45rem;
            color: #333;
            font-size: 0.75rem;
        }

        .cha0{
            position:absolute;
            width:30px;
            height:30px;
            background:url('__IMG__cha@3x.png')no-repeat center center;
            background-size:30px 30px;
            top:7px;
            right:7px;
            z-index: 999;
        }
        .btn{
            width:100%;
            padding: 0 0.8rem;
            position:fixed;
            bottom:0rem;
        }
        select {
            padding: 2px;
            box-sizing: border-box;
            width:auto;
            background-color: white !important;
            direction: rtl;
        }
        select option {
            background-color: none !important;
            direction: ltr;
        }
        .body {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
        }

        .title {
            height: 44px;
            color: #EB9F18;
            line-height: 44px;
            text-align: center;
            background-color: #FFFFFF;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            border-bottom: 1px solid #EFEFEF;
        }

        .confirm {
            position: absolute;
            top: 0;
            right: 0;
            height: 44px;
            line-height: 44px;
            color: #F4A435;
            font-size: 16px;
            padding-right: 15px;
        }

        .close {
            position: absolute;
            top: 0;
            left: 0;
            height: 44px;
            line-height: 44px;
            color: #999999;
            font-size: 14px;
            padding-left: 15px;
        }

        .list-area {
            display: flex;
            align-items: center;
            position: relative;
            height: 145px;
            background-color: #FFFFFF;
        }

        .list-01 {
            flex: 1;
            overflow-y: scroll;
            height: 145px;
        }

        .scroll-area {
            min-height: 290px;
        }

        .hr-1 {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            width: 100%;
            height: 1px;
            position: absolute;
            top: 44px;
            left: 0;
            background: #E8E8E8;
        }

        .hr-2 {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            width: 100%;
            height: 1px;
            position: absolute;
            bottom: 51px;
            left: 0;
            background: #E8E8E8;
        }

        .list-item {
            height: 51px;
            text-align: center;
            line-height: 51px;
            color: #999999;
            font-size:15px;
        }

        .list-item-active {
            height: 40px;
            text-align: center;
            line-height: 41px;
            color: #333333;
            font-size: 16px;
            font-weight: 700;
        }
        .alltu{
            width: 100%;

            box-sizing: border-box;
            padding-top: 0.2rem;

        }
        .alltu .newimg{
            width: 100%;
            box-sizing: border-box;
            height: 150px;
        }
    </style>
</head>

<body>
<div class="l_box"  id="loading2"><img src="__IMG__loading.gif" alt="" id="loading"></div>
<div class="toast-wrap">
    <span class="toast-msg"></span>
</div>
<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">志愿者认证</div>
    <a class="aui-pull-right">
        <span class="aui-iconfont right" tapmode="active" onclick="history.back(-1)">上一步</span>
    </a>
</header>
<div class="container">
    <div class="stage">
        <div class="round"></div>
        <div class="line underLineee"></div>
        <div class="round"></div>
        <div class="line underLinee"></div>
        <div class="round1"></div>
    </div>
    <div class="stageName">
        <div class="name">身份认证</div>
        <div class="name">执业认证</div>
        <div class="name">完成</div>
    </div>
</div>
<div class="person">
    <div class="box underLine2 flex-wrap" onclick="hospital()" tapmode='active'>
        <div class="info">执业医院</div>
        <div class="flex-con"></div>
        <div class="data1" id="hospitalname">请选择</div>
        <div class="arrow"></div>
    </div>
    <div class="box underLine2 flex-wrap" onclick="fnKe(2)" tapmode='active'>
        <div class="info">所属科室</div>
        <div class="flex-con"></div>
        <div class="data1" id="keshiname">请选择</div>
        <div class="arrow"></div>
    </div>

    <div class="box underLine2 flex-wrap" onclick="fnKe(3)" tapmode='active'>
        <div class="info">职称</div>
        <div class="flex-con"></div>
        <div class="data1" id="zhicheng">请选择</div>
        <div class="arrow"></div>
    </div>
    <div class="box flex-wrap" onclick="fnKe(4)" tapmode='active'>
        <div class="info">职务</div>
        <div class="flex-con"></div>
        <div class="data1" id="zhiwu">请选择</div>
        <div class="arrow"></div>
    </div>

</div>
<div class="holder"></div>
<div class="content">
    <div class="upTitle">上传职称证明</div>
    <div class="upName">例如：执业证/资格证/专业培训合格证/工牌等，上传有效信息越多，认证成功几率越大。</div>
    <div class="picBox">
        <div class="pic">
            <img src="__IMG__jingtaitu/main1_activity.png" alt="" class="picImg">
            <div class="picText">样例</div>
        </div>
        <div class="pic">
            <img src="__IMG__jingtaitu/main1_activity.png" alt="" class="picImg">
            <div class="picText">样例</div>
        </div>
        <div class="pic">
            <img src="__IMG__jingtaitu/main1_activity.png" alt="" class="picImg">
            <div class="picText">样例</div>
        </div>
    </div>

    <div class="addPic" id="photoAll">
        <!--<div class="addPic1" tapmode>-->
            <!--<img src="__IMG__jingtaitu/main1_activity.png" class="addImg tu" />-->
            <!--<div class="cha0" tapmode onclick="delectImg(this);">-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="addPic1" tapmode>-->
            <!--<img src="__IMG__jingtaitu/main1_activity.png" class="addImg tu" />-->
            <!--<div class="cha0" tapmode onclick="delectImg(this);">-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="addPic1" tapmode>-->
            <!--<img src="__IMG__jingtaitu/main1_activity.png" class="addImg tu" />-->
            <!--<div class="cha0" tapmode onclick="delectImg(this);">-->
            <!--</div>-->
        <!--</div>-->
        <img src="__IMG__addImg.png" alt="" id="addbutton" class="addImg" style="margin-top: 0.3rem;" onclick="cards();">
    </div>
</div>
<div class="btn">
    <div class="next" onclick="fnNext()" tapmode='active'>下一步</div>
</div>

<div class="body" id="zhezhao">
    <div style="position: fixed;bottom: 0;left: 0;width: 100%" class="underLine" id="caozuo">
        <div class="title">
            <div class="close" tapmode>取消</div>
            <a href="javascript:void(0)">  <div class="confirm" tapmode>确定</div> </a>

        </div>
        <div class="list-area">
            <div class="list-01" id="child" onscroll="CalculateDistance2(this)">
                <div class="scroll-area" id="render-item-2">
                </div>
            </div>

            <div class="hr-1"></div>
            <div class="hr-2"></div>
        </div>
    </div>

</div>




</body>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    // 定义存放图片的数组
    var allpictuer=[];
    // 获取数据
    getdata2();
    function getdata2() {
        loaddingOpen();
        $.ajax({
            url:'{:url("My/approvSec")}',
            data:"user_id="+'',
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();
                if (data.status=='200') {
                    // $('#name').val(data.data.user_rel_name);
                    // $('#card').val(data.data.user_card);
                    if (data.data.hospital==null) {

                    }else {
                        $('#hospitalname').html(data.data.hospital);
                        $('#hospitalname').attr('data-id',data.data.hospital_id);
                    }
                    if (data.data.department==null) {

                    }else {
                        $('#keshiname').html(data.data.department);
                        $('#keshiname').attr('data-id',data.data.department_id);
                    }

                    if (data.data.title==null) {

                    }else {
                        $('#zhicheng').html(data.data.title);
                        $('#zhicheng').attr('data-id',data.data.title_id);
                    }
                    if (data.data.post==null) {

                    }else {
                        $('#zhiwu').html(data.data.post);
                        $('#zhiwu').attr('data-id',data.data.post_id);
                    }
                    var html='';

                    if (data.data.user_business_image.length>0) {

                       $.each(data.data.user_business_image,function (k,v) {
                           allpictuer.push(v);
                           html +='<div class="addPic1 f" tapmode>';
                           html +='<img src="'+v+'" class="addImg tu" data-id="yes" />';
                           html +='<div class="cha0" tapmode onclick="delectImg(this);" data-id="'+v+'">';
                           html +='</div></div>';
                       })

                    }
                    $('#addbutton').before(html);

                    // $('#mechanism_id').html(data.data.district);

                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();

                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });

    }


    function fnNext() {

        // window.location.href='{:url("my/renzheng_waitting")}';

        if ($('#hospitalname').innerHTML=='请选择') {
            toast('请选择执业医院');
            return;
        }
        if ($('#keshiname').innerHTML=='请选择') {
            toast('请选择所属科室');
            return;

        }
        if ($('#zhicheng').innerHTML=='请选择') {
            toast('请选择职称');
            return;

        }
        if ($('#zhiwu').innerHTML=='请选择') {
            toast('请选择职务');
            return;
        }

        var picture=document.getElementsByClassName('addImg tu');

        var shuzu=[];
        // 判断图片data-id是否存在，存在（图片是http。。。），不存在(新加的图片是白色64位）则加入数组shuzu
        for (var i=0;i<picture.length;i++){
            if (picture[i].dataset.id) {
            }else {
                shuzu.push(picture[i].src);
            }
        }

        if (shuzu.length==0&&allpictuer.length==0) {
            toast('请上传职称证明');
            return;
        }
        // 把存放图片(带http的）的数组转为用，隔开字符串
        var newstr='';
        for (var j=0;j<allpictuer.length;j++)  {
            if (j==0) {
                newstr+=allpictuer[j];
            }else {
                newstr+=',';
                newstr+=allpictuer[j];
            }
        }
        var newdata={
            hospital:$('#hospitalname').attr('data-id'),
            department:$('#keshiname').attr('data-id'),
            title:$('#zhicheng').attr('data-id'),
            duty:$('#zhiwu').attr('data-id'),
            business:shuzu,
            image:newstr

        };
        // var str=JSON.stringify(newdata);
        $.ajax({
            url:'{:url("My/approveSecond")}',
            data:newdata,
            type:'POST',
            dataType:'JSON',
            success: function(data){
                alert(data.msg);
                if (data.status==200) {
                    toast('保存成功');
                    window.location.href='{:url("my/renzheng_waitting")}';
                }else {
                    toast(data.msg);

                }

            },
            error: function(xhr, type){
                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });
        // window.location.href='{:url("my/renzheng_waitting")}';

    }


    function hospital() {
        var hospitalname,keshiname,zhiwu,zhicheng;
        if ($('#hospitalname').html()=='请选择') {
            hospitalname='';
        }else{
            hospitalname=$('#hospitalname').attr('data-id');

        }
        if ($('#keshiname').html()=='请选择') {
            keshiname='';
        }else{
            keshiname=$('#keshiname').attr('data-id');

        }
        if ($('#zhiwu').html()=='请选择') {
            zhiwu='';
        }else{
            zhiwu=$('#zhiwu').attr('data-id');

        }
        if ($('#zhicheng').html()=='请选择') {
            zhicheng='';
        }else{
            zhicheng=$('#zhicheng').attr('data-id');

        }

        window.location.href='{:url("my/select_hospital")}?json='+hospitalname+'='+keshiname+'='+zhicheng+'='+zhiwu;
    }
    function fnKe(index) {
        $('#zhezhao').show();
        choosetype=index;
        getdata(index);
    }

    var isScroll = false;
    var timer;
    var choosetype=0;
    var data2 = [];
    // 获取数据
    function getdata(index) {

        loaddingOpen();

        var data3={
            key:'',
            type:index
        };
        $.ajax({
            url:'{:url("My/getHospital")}',
            data:data3,
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();
                console.log(data);
                //
                var data22=[];
                if (data.status=='200') {
                    dz_json = data.data;
                    for (var i=0;i<data.data.length;i++) {

                        data22.push(data.data[i]);
                    }
                    data2=data22;
                    document.getElementById('render-item-2').innerHTML=renderShi(data22);
                    document.getElementById('child').scrollTop =51;
                    document.getElementById('child').addEventListener('touchmove', CalculateDistance2(document.getElementById('child')));

                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();

                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });


    }
    //渲染市
    function renderShi (data22) {
        var html = '<div class="list-item"></div>';

        for (var i = 0; i < data22.length; i++) {
            if (i == 1) {
                html+='<div class="list-item list-item-active" data-id="'+data22[i].assortment_id+'">'+data22[i].name+'</div>';

            }else{
                html+='<div class="list-item" data-id="'+data22[i].assortment_id+'">'+data22[i].name+'</div>';

            }

        }
        html+='<div class="list-item" data-id="'+''+'">'+''+'</div>';
        html += '<div class="list-item"></div>';
        return html;
    }




    function CalculateDistance2 (el) {
        var scrollDistance = +el.scrollTop;
        var parentItem=document.getElementsByClassName('list-item');
        // var parentItem = $api.domAll(el, '.list-item');
        document.getElementsByClassName('list-item-active')[0].className='list-item';
        parentItem[parseInt(scrollDistance / 51) + 1].className='list-item list-item-active';

        setTimeout(function () {
            el.scrollTop = (parseInt(+el.scrollTop / 51)) * 51;
        }, 300);
    }
    // 确认按钮
    $('.confirm').click(function(e){
        var keshi_id=document.getElementsByClassName('list-item-active')[0].dataset.id;
        var keshi_name=document.getElementsByClassName('list-item-active')[0].innerHTML;
        if (choosetype==2) {
            $('#keshiname').html(keshi_name);
            $('#keshiname').attr('data-id',keshi_id);
        }else if (choosetype==3) {
            $('#zhicheng').html(keshi_name);
            $('#zhicheng').attr('data-id',keshi_id);
        }else if (choosetype==4) {
            $('#zhiwu').html(keshi_name);
            $('#zhiwu').attr('data-id',keshi_id);
        }
        $('#zhezhao').hide();
        e.stopPropagation();
    })
    // 取消按钮
    $('.close').click(function(e){

        $('#zhezhao').hide();
        e.stopPropagation();
    })

    $('#caozuo').click(function(e){
        e.stopPropagation();
    })


    // 取消遮罩
    $('.body').click(function(e){
        $('.body').hide();


    })

</script>
<script type="text/javascript">
    // $('#ta').on('input', function () {
    //     $('.shuzi').text($('#ta').val().length + '/200');
    // });

    wx.config({$json});
    wx.ready(function () {
        wx.error(function(res){
            alert("接口调取失败")
        });
        wx.checkJsApi({
            jsApiList: [
                'chooseImage',
                'uploadImage',
                'downloadImage',
                'getLocalImgData',
            ],
            success: function (res) {
                if (res.checkResult.getLocation == false) {
                    alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                    return;
                }
            },
            error:function (res) {
                alert('res-error')
            }
        });
    })
    //上传证件
    var cards = function(){
        var o = 9 - $('#photoAll').find('.f').length;
        wx.chooseImage({
            count: o,
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds;
                var i = 0, length = localIds.length;
                var f = parseInt($('#photoAll').find('.f').length) + parseInt(length);
                if(f == 9){
                    $('#addbutton').hide();
                }else{
                    $('#addbutton').show();
                }
                function upload() {
                    wx.uploadImage({
                        localId: localIds[i],
                        isShowProgressTips: 0,
                        success: function(res) {
                            wx.downloadImage({
                                serverId: res.serverId,
                                isShowProgressTips: 0,
                                success: function (res) {
                                    wx.getLocalImgData({
                                        localId: res.localId, // 图片的localID
                                        success: function (res) {
                                            var html='';
                                            html+='<div class="addPic1 f" tapmode>';
                                            html+='<img src="'+localIds[i]+'" class="addImg tu" />';
                                            html+='<div class="cha0" tapmode onclick="delectImg(this);">';
                                            html+='</div></div>';
                                            $('#addbutton').before(html);
                                            // $('#photoAll').append('<div class="photo f" style="display:inline-block;position:relative;margin-bottom:20px;margin-left:19px;"><input type="hidden" name="photo[]" value="'+res.localData+'"><img style="width:100%;height:100%;"  src="'+localIds[i]+'" /><div class="cha" onclick="shan(this)"><img  src="__IMG__cha@3x.png" /></div></div>')
                                            i++;
                                            if (i < length) {
                                                upload();
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    });
                }
                upload();
            }
        })
    }
    var delectImg = function(obj){
        $(obj).parent().remove();
        // obj.parentNode.remove();
        var z = $('#photoAll').children('.f').length;
        // $('#tit').text('上传证件照片（'+z+'/3）');
        if(z < 9){
            $('#addbutton').show();
        }
        // this.dataset.id或$(this).attr('data-id')有一个可以用的
        // 假如data-id存在说明该图片是从后台拿过来的，则需要把他从数组里删除，否则不用管它
        if (this.dataset.id) {
            for (var i=0;i<allpictuer.length;i++) {
                if (allpictuer[i]==this.dataset.id) {
                    allpictuer.splice(i,1);
                }
            }
        }
    }

</script>

</html>
